<template>
  <vue-json-editor
    class="Fg-Json-Editor"
    v-model="jsonContent"
    :showBtns="false"
    mode="code"
    lang="zh"
    :expanded-on-start="true"
    @json-change="onJsonChange"
    @json-save="onJsonSave"
  />
</template>

<script>
import vueJsonEditor from "vue-json-editor";
export default {
  name: "JsonEditor",
  components: { vueJsonEditor },
  props: {
    modelValue: {},
  },
  data() {
    return {
      jsonContent: this.modelValue || {},
    };
  },
  watch: {
    jsonContent() {
      this.$emit("input", this.jsonContent);
      this.$emit("change", this.jsonContent);
    },
  },
  methods: {
    onJsonChange() {
      // console.log("jsonContent", this.jsonContent);
    },
    onJsonSave(modelValue) {
      this.jsonContent = modelValue;
    },
  },
};
</script>

<style lang="scss" >
.Fg-Json-Editor {
  width: 100%;
  height: 100%;
  .jsoneditor-vue {
    width: 100%;
    height: 100%;
  }
}
</style>